
<template>
    <div class="energy">
        <div class="main-child">
            <!-- 1、实际与计划能耗比例 -->
            <div class="txun">实际与计划能耗比例</div>
            <div class="stytr">
                <div class="styfive">·&nbsp;&nbsp;总能耗</div>
                <div class="detail">
                    <div class="left-one">
                        <div class="pohotimg">
                            <div ref="onechart" style="width: 100%;height:100%;"></div>
                        </div>
                        <div class="fontsty">
                            <div><span class="plan"></span><span>计划</span></div>
                            <div><span class="actual actual-one"></span><span>实际</span></div>
                        </div>
                    </div>
                    <div class="right-one">
                        <div class="percentage percentage-one">{{percentonethree}}%</div>
                        <div class="scale">计划能耗：实际能耗</div>
                    </div>
                </div>
            </div>
            <div class="stytr">
                <div class="styfive">·&nbsp;&nbsp;公区能耗</div>
                <div class="detail">
                    <div class="left-one">
                        <div class="pohotimg">
                            <div ref="twochart" style="width: 100%;height:100%;"></div>
                        </div>
                        <div class="fontsty">
                            <div><span class="plan"></span><span>计划</span></div>
                            <div><span class="actual actual-two"></span><span>实际</span></div>
                        </div>
                    </div>
                    <div class="right-one">
                        <div class="percentage percentage-two">{{percenttwo}}%</div>
                        <div class="scale">计划能耗：实际能耗</div>
                    </div>
                </div>
            </div>
            <!-- 2、累计耗能量 -->
            <div class="txun" style="margin-top:5px">累计耗能量</div>
            <div class="adduplast commonstyl clearfix">
                <div class="left-two"><div ref="mainone" style="width: 100%;height:100%;margin:0"></div></div>
                <div class="right-two">
                    <div class="nation">按国家标准计算</div>
                    <div class="stand"><span class="statecolor">{{realitydata}}</span>&nbsp; kwh</div>
                    <div class="stand"><span class="stand-one">折合标准煤：</span><span class="stand-two">{{coal}}</span>吨</div>
                    <div class="stand"><span class="stand-one">折合&emsp;CO₂ ：</span><span class="stand-two">{{CO2}}</span>吨</div>
                </div>
            </div>
            <!-- 3、最近12月能耗趋势图 -->
            <div class="txun" style="margin-top:5px"><span style="float:left;position:relative;top:-12px;">最近12月能耗趋势</span></div>
            <div class="commonstyl">
                <div ref="main" style="width: 100%;height:100%"></div>
            </div>
        </div>
    </div>
</template>

<script>
// import echarts from "echarts";
import { allEnergy, commonEnergy, trendEnergy } from "@/api/baseurl";
var echarts = require("echarts");
import { debounce } from "../../../utils";
export default {
  name: "energy",
  data() {
    return {
      myChart: null,
      chart: null,
      myChart2: null,
      twochart: null,
      percenttwo: null,
      percentonethree:null,
      realitydata:null,
      CO2:null,
      coal:null,
      stratGetdata: null
    };
  },
  mounted() {
    // this.initChart()
    this.public()
    this.addUp()
    this.latse()
    this.stratGetdata = setInterval(() => {
        this.public()
        this.addUp()
        this.latse()
    },3000)
    
    // 宽度变化，echarts自适应--暂无效果：echarts宽度固定
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.myChart.resize();
        this.chart.resize();
        this.myChart2.resize();
        this.twochart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeDestroy() {
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
    clearInterval(this.stratGetdata)
  },
  methods: {
    // 公区能耗
    public(){
      // console.log('890')
      allEnergy().then(response => {
        this.percenttwo = ((response.data.percent)*100).toFixed(2);//百分比
        this.initChart2(response.data.total, response.data.reality);//总值 实际值
        // console.log(response.data)
      })
    },
    //总能耗 累计耗能量
    addUp(){
      commonEnergy().then(response => {
        this.percentonethree = ((response.data.percent)*100).toFixed(2);//百分比 （同一个
        this.CO2 = response.data.CO2
        this.coal = response.data.coal
        this.realitydata = response.data.total - response.data.reality
        this.initChart3(this.percentonethree, response.data.total-response.data.reality, response.data.reality)//第三个echarts图 百分比
        this.initChart1(response.data.total,response.data.reality)//第一个echarts图 总值 实际值
        // console.log(response.data);
      });
    },
    // 最近12月趋势
    latse(){
      trendEnergy().then(response => {
        this.initChart(response.data.data,response.data.month);
        // console.log(response.data.month)
      });
    },
    // 图表渲染 第三个
    initChart3(percent, thisData, nullData) {
      this.chart = echarts.init(this.$refs.mainone);
      var colors = ["#3b9651", "#373838"]
      this.chart.setOption({
        color: colors,
        tooltip: {
          trigger: "item",
          formatter: "{b}: -{c} (-{d}%)"
        },
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: percent+'%',
            textAlign: "center",
            fill: "#3b9651",
            fontSize: "22"
          }
        },
        series: [
          {
            // name: "",
            type: "pie",
            radius: ["65%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              normal: { show: false }
            },
            data: [
              { value: thisData, name: "累计耗能量" },
              { value: nullData, name: "占位", hoverAnimation: false, tooltip: {show: false} }
            ]
          }
        ]
      });
    },
    // 图表渲染  最后一个
    initChart(datatrebd,month) {
      this.myChart = echarts.init(this.$refs.main);
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: "{a}<br>{b}: {c}kwh"
        },
        grid: {
          top: 35,
          left: 20,
          right: 20,
          bottom: 35
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "category",
            data: month,
            axisTick: { show: false },
            axisLabel: {
              interval: 2,
              textStyle: {
                color: "#ddd" //坐标值得具体的颜色
              }
            }
          }
        ],
        yAxis: [
          {
            name: "kwh",
            nameLocation: "end",
            nameTextStyle: {
              color: "#fff",
              fontWeight: "normal"
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            type: "line",
            valueAxisIndex: 0,
            name: "最近12月能耗趋势",
            data: datatrebd,
            // data: ['1','2','3','4','5','7','5','4','3','1','3','9'],
            barMaxWidth: 40,
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(60, 117, 196, 0.75)"
                    },
                    {
                      offset: 1,
                      color: "rgba(60, 117, 196, 0)"
                    }
                  ]
                },
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "rgb(60,117,196)"
              }
            },
            xAxisIndex: 0,
            yAxisIndex: 0
          }
        ]
      });
    },
    //图表渲染 第一个
    initChart1(total,reality) {
      this.myChart2 = echarts.init(this.$refs.onechart);
      this.myChart2.setOption({
        grid: {
          top: 10,
          left: 0,
          right: 0,
          bottom: 0
        },
        yAxis: {
          type: "value",
          show: false
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: ["总能耗"]
          },
          {
            type: "category",
            show: false,
            data: ["总能耗"]
          }
        ],
        series: [
          {
            type: "bar",
            xAxisIndex: 1,
            zlevel: 1,
            barGap: "100%",
            barWidth: "10%",
            data: [total],
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 1,
                borderColor: "#ffffff",
                barBorderRadius: 100
              }
            }
          },
          {
            type: "bar",
            xAxisIndex: 1,
            zlevel: 1,
            barGap: "100%",
            barWidth: "10%",
            data: [total],
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 1,
                borderColor: "#ffffff",
                barBorderRadius: 100
              }
            }
          },
          {
            name: "计划",
            type: "bar",
            zlevel: 2,
            barGap: "100%",
            barWidth: "10%",
            data: [total],
            itemStyle: {
              normal: {
                color: "#4395ff",
                barBorderRadius: 100
              }
            }
          },
          {
            name: "实际",
            type: "bar",
            zlevel: 2,
            barGap: "100%",
            barWidth: "10%",
            data: [reality],
            itemStyle: {
              normal: {
                color: "#3b9651",
                barBorderRadius: 100
              }
            }
          }
        ]
      });
    },
    // 图表渲染 第二个
    initChart2(total, reality, percent) {
      this.twochart = echarts.init(this.$refs.twochart);
      this.twochart.setOption({
        grid: {
          top: 10,
          left: 0,
          right: 0,
          bottom: 0
        },
        yAxis: {
          type: "value",
          show: false
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: ["总能耗"]
          },
          {
            type: "category",
            show: false,
            data: ["总能耗"]
          }
        ],
        series: [
          {
            type: "bar",
            xAxisIndex: 1,
            zlevel: 1,
            barGap: "100%",
            barWidth: "10%",
            data: [total],
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 1,
                borderColor: "#ffffff",
                barBorderRadius: 100
              }
            }
          },
          {
            type: "bar",
            xAxisIndex: 1,
            zlevel: 1,
            barGap: "100%",
            barWidth: "10%",
            data: [total],
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 1,
                borderColor: "#ffffff",
                barBorderRadius: 100
              }
            }
          },
          {
            name: "计划",
            type: "bar",
            zlevel: 2,
            barGap: "100%",
            barWidth: "10%",
            data: [total],
            itemStyle: {
              normal: {
                color: "#4395ff",
                barBorderRadius: 100
              }
            }
          },
          {
            name: "实际",
            type: "bar",
            zlevel: 2,
            barGap: "100%",
            barWidth: "10%",
            data: [reality],
            itemStyle: {
              normal: {
                color: "#3b9651",
                barBorderRadius: 100
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$one-one: #00a0e9;
$one-teo: #3b9651;
$one-three: #3b9651;
$one-four: #00a0e9;
$mrtop: 5px;
.energy {
  height: 100%;
  margin-top: 50px;
  width: 27%;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 0px;
  .main-child {
    height: 90%;
    width: 100%;
    position: absolute;
    padding: 0px 40px 0px 0px;
    top: 1%;
    // 1、实际与计划能耗比例
    .txun {
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left: 25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size: 100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    .addtop {
      margin-top: $mrtop;
    }
    .stytr {
      width: 92%;
      height: 20%;
      margin-left: 16px;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
      .styfive {
        border-bottom: 2px solid $borderbottom;
        padding: 8px;
      }
      .detail {
        padding: 10px;
        margin: 0;
        font-size: 0;
        height: 75%;
        width: 100%;
        .left-one {
          width: 60%;
          height: 100%;
          float: left;
          .pohotimg {
            width: 55%;
            height: 100%;
            height: 100%;
            float: left;
            .svgone {
              width: 50%;
              height: 100%;
              float: left;
            }
            .svgtwo {
              height: 100%;
              width: 50%;
              float: left;
            }
          }
          .fontsty {
            width: 30%;
            height: 100%;
            float: left;
            text-align: center;
            .plan {
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: $one-one;
              margin-top: 40%;
              margin-right: 8px;
            }
            .actual {
              display: inline-block;
              width: 10px;
              height: 10px;
              margin-top: 10px;
              margin-right: 8px;
            }
            .actual-one {
              background-color: $one-teo;
            }
            .actual-two {
              background-color: $one-three;
            }
          }
        }
        .right-one {
          width: 40%;
          height: 100%;
          float: left;
          text-align: center;
          .percentage {
            font-size: 0.22rem;
            margin-top: 13%;
            color: $one-teo;
          }
          .percentage-one {
            color: $one-teo;
          }
          .percentage-two {
            color: $one-three;
          }
          .scale {
            font-size: 0.14rem;
            margin-top: 1%;
          }
        }
      }
    }
    // 2、3公用样式
    .commonstyl {
      width: 92%;
      margin-left: 16px;
      height: 18%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
      // padding: 10px;
    }
    //2、 累计耗能量
    .adduplast {
      .left-two {
        width: 40%;
        height: 100%;
        float: left;
        text-align: center;
      }
      .right-two {
        width: 60%;
        height: 100%;
        float: left;
        margin: 4% 0 0 0;
        color: $colorwhite;
        .statecolor {
          color: $one-one;
        }
        .stand {
          margin-top: 3%;
          width: 100%;
          .stand-one {
            display: inline-block;
            width: 46%;
          }
          .stand-two {
            color: $one-one;
            display: inline-block;
            width: 30%;
          }
        }
      }
    }
  }
}
</style>

 
